<template>
  <section>
    <el-table :data="tableData"
              :show-header="false"
              stripe
              row-class-name="totalRowSty"
              class="totalSty totalRowSty"
              :row-style="{ height: '50px' }"
              :cell-style="{ padding: '0px' }"
              v-loading="tableColumn.length > 0 ? false : true"
              element-loading-text="加载中"
              element-loading-spinner="el-icon-loading"
              tooltip-effect="dark"
              ref="totalTable"
              :key="Math.random()"
              :height="tableHeight"
              border>
      <!-- src="@/static/images/no_data.png" -->
      <template slot="empty">
        <img class="empty_img"
             :src="emptyImg"
             alt="" />
        <p class="empty_size">{{ emptyText }}</p>
      </template>
      <template v-for="(column, index) in tableColumn">
        <el-table-column :key="index"
                         v-bind="column"
                         :width="column.width">
          <template slot-scope="scope">
            <order-info v-if="column.type === 'orderInfo'"
                        class="tooltipSty"
                        :row="scope.row"
                        :name="'billTotal'" />
            <span v-else>{{ scope.row[column.name] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </section>
</template>

<script>
import { mapState } from "vuex";
import OrderInfo from "@components/table/column/OrderInfo.vue"
import { finance } from '@/api/index'

export default {
  components: { OrderInfo },
  name: "PageTotal",
  props: {
    actions: {
      type: Array
    },
    api: {
      type: Object
    },
    filters: {
      type: Array,
      default () {
        return [];
      }
    },
    columns: {
      type: Array,
      default: () => []
    },
    records: {
      type: [Array, Function, Promise, Object],
    },
  },
  data () {
    return {
      pageSize: 10,
      pageNo: 1,
      sort: [{ name: "createAt", asc: false }],
      pageSizeOptions: [10, 20, 50, 100],
      filterData: {},
      sortData: {},
      tableHeight: 100,
      loading: true,
      tableData: [],
      tableColumn: [
        { label: "", type: "", width: "50px" },
        {
          label: "合同编号",
          type: "contractNo",
          width: "80px",
          name: "contractNo"
        },
        { label: "合单号", width: "80px", type: "combineContractNo", name: "" },
        { label: "发货方信息", width: "190px", type: "fromInfo" },
        { label: "收货方信息", width: "190px", type: "toInfo" },
        {
          label: "运输信息",
          width: "280px",
          type: "orderInfo",
          name: "totalQuantity"
        },
        { label: "承运方名称", type: "text", width: "80px" },
        {
          label: "物品价值（元）",
          type: "billFee",
          width: "80px",
          name: "totalValue"
        },
        { label: "车型", width: "80px", type: "carInfo" },
        {
          label: "发货时间",
          width: "80px",
          type: "time",
          timeName: "fromTime"
        },
        { label: "收货时间", width: "80px", type: "time", timeName: "toTime" },
        {
          label: "总运费（元）",
          width: "80px",
          type: "billFee",
          name: "totalFee"
        },
        {
          label: "回执付款",
          width: "80px",
          type: "billFee",
          name: "totalReceiptFee"
        },
        {
          label: "预付款",
          width: "80px",
          type: "billFee",
          name: "totalPrepayFee"
        },
        {
          label: "货到付款",
          width: "80px",
          type: "billFee",
          name: "totalArrivePayFee"
        },
        {
          label: "代收货款",
          width: "80px",
          type: "billFee",
          name: "totalCollectionFee"
        },
        {
          label: "零担费",
          width: "80px",
          type: "billFee",
          name: "totalDivideFee"
        },
        {
          label: "整车费",
          width: "80px",
          type: "billFee",
          name: "totalWholeFee"
        },
        {
          label: "提货费",
          width: "80px",
          type: "billFee",
          name: "totalPickFee"
        },
        {
          label: "送货费",
          width: "80px",
          type: "billFee",
          name: "totalDeliverFee"
        },
        {
          label: "装货费",
          width: "80px",
          type: "billFee",
          name: "totalDeliverFee"
        },
        {
          label: "卸货费",
          width: "80px",
          type: "billFee",
          name: "totalUnloadFee"
        },
        {
          label: "保险费",
          width: "80px",
          type: "billFee",
          name: "totalInsureFee"
        },
        { label: "税费", width: "80px", type: "billFee", name: "totalTaxFee" },
        {
          label: "补充费用",
          width: "80px",
          type: "billFee",
          name: "totalSurchargeFee"
        },
        { label: "运单状态", width: "80px", type: "statusDesc" },
        { label: "签收时间", width: "80px", type: "time", timeName: "signAt" },
        { label: "单据编号", width: "80px", type: "orderNo" },
        { label: "备注", type: "desc" }
      ],
      emptyText: "",
      emptyImg: "",
      multipleSelection: [],
      menuList: [57, 108, 109]
    };
  },
  watch: {
    records: {
      handler (val) {
        this.$nextTick(() => {
          if (val) {
            val.contractNo = "本页小计";
            if (this.tableData.length > 1) {
              this.$set(this.tableData, 0, val);
              // this.tableData[0] = val
            } else if (this.tableData.length > 0) {
              this.tableData = ([val] || []).concat(this.tableData);
            } else {
              this.tableData = [val] || [];
            }
            this.emptyText = "暂无数据";
            this.emptyImg = require("@/static/images/no_data.png");
          }
        });
      },
      deep: true
    }
  },
  computed: {
    // tableTotalFilter() {
    //   return
    // },
    mergedFilterData () {
      return {
        page: this.pageNo,
        size: this.pageSize,
        sort: this.sort,
        ...this.filterData,
        ...this.sortData
      };
    },
    ...mapState({
      menu: (state) => state.menu.menu,
      preset: (state) => state.table.localize.preset
      // showPageTotal: (state) => state.table.localize.search.showPageTotal,
    })
  },
  created () {
    // 暂时写死  {menuId} 57 全部订单
    if (this.menu.menuId === 57) {
      this.$store.dispatch("table/orderSearchSum", this.mergedFilterData);
    }
    //totalSearch()
  },
  methods: {
    handleAction (action) {
      this.$emit("action", action);
    },
    handleClick (action) {
      this.$emit("action", action);
    },
    handleSearch (filterData) {
      // this.pageNo = 1;
      // this.pageSize = 10;
      this.filterData = Object.assign({}, this.filterData, { ...filterData });
      this.$emit("search", this.mergedFilterData);
    },
    async totalSearch () {
      let { code, data } = await finance.getListTotal(
        Object.assign(this.mergedFilterData, {
          waybillType: this.preset.waybillType,
          financeStatus: this.preset.financeStatus
        })
      );
      if (typeof data === "object") {
        data.contractNo = "全部合计";
        this.tableData.push(data || {});
      }
    },
    handleReset (filterData) {
      this.pageNo = 1;
      this.pageSize = 10;
      this.filterData = filterData;
      this.$emit("search", this.mergedFilterData);
    },
    handleSizeChange () {
      this.$emit("search", this.mergedFilterData);
    },
    handleCurrentChange () {
      this.$emit("search", this.mergedFilterData);
    },
    handleSelectionChange (multiple) {
      this.multipleSelection = multiple;
      this.$emit("action", this.multipleSelection);
    },
    handleSortChange (sortData) { }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.totalSty {
  flex: 0.17;
  /deep/.el-table__body-wrapper {
    overflow-x: hidden !important;
  }
}
/deep/ .totalRowSty {
  background-color: var(--prev-bg-lightgrey) !important;
}
</style>
